<template>
  <div class="popup">
    <van-search
      v-model="iptVal"
      show-action
      :placeholder="iptPlaceholder"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <HistoryHot
      @tagClick="tagClick"
      v-if="blockShow == 1"
      @changePlaceholder="changePlaceholder"
    ></HistoryHot>
    <MyList
      @cellClick="cellClick"
      v-else-if="blockShow == 2"
      :arr="listArr"
    ></MyList>
    <MyProduct
      v-else
      @priceChange="priceChange"
      @categoryChange="categoryChange"
      :goodsList="goodsList"
      :filterCategory="filterCategory"
    ></MyProduct>
  </div>
</template>

<script>
import { GoodsSearchAPI, KeepSearchAPI } from '../request/api'
import HistoryHot from '../components/HistoryHot.vue'
import MyProduct from '../components/MyProduct.vue'
import MyList from '../components/MyLists.vue'
export default {
  name: 'mypopup',
  components: {
    HistoryHot,
    MyProduct,
    MyList
  },
  data () {
    return {
      iptVal: '',
      iptPlaceholder: '',
      // 需要显示的模块
      // 1代表历史记录与热门搜索
      // 2代表列表区块
      // 3代表产品区块
      blockShow: 1,
      // List组件的数组
      listArr: [],
      // 商品数组
      goodsList: [],
      // 分类的数组
      filterCategory: [],
      // 请求的页数
      page: 1,
      // 请求个数
      size: 20,
      // 价格排序
      order: 'desc',
      // 按照id或price排序
      sort: 'id',
      // 分类id
      categoryId: 0
    }
  },
  methods: {
    // 单元格传递过来的事件
    cellClick (val) {
      this.iptVal = val
      this.onSearch()
    },
    // 历史区块传递的事件
    tagClick (val) {
      // console.log(val)
      this.iptVal = val
      this.onSearch()
    },
    // 子级传递过来的事件
    categoryChange (val) {
      this.categoryId = val
      this.onSearch()
    },
    priceChange (val) {
      this.order = val
      this.sort = 'price'
      this.onSearch()
    },
    // 搜索
    onSearch (val) {
      GoodsSearchAPI({
        keyword: this.iptVal,
        page: this.page,
        size: this.size,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort
      }).then(res => {
        console.log(res)
        if (res.errno == 0) {
          // 显示产品区块
          this.blockShow = 3
          let { goodsList, filterCategory } = res.data
          this.goodsList = goodsList
          let arr = JSON.parse(
            JSON.stringify(filterCategory)
              .replace(/name/g, 'text')
              .replace(/id/g, 'value')
          )
          this.filterCategory = arr
        }
      })
    },
    // 实时搜索
    onInput () {
      // 显示列表区块
      this.blockShow = 2
      KeepSearchAPI({ keyword: this.iptVal }).then(res => {
        if (res.errno == 0) {
          this.listArr = res.data
          console.log('这是实时搜索的值', res)
        }
      })
    },
    // 取消
    onCancel () {
      // 这两个是等效的
      // this.$router.push('/home')
      // 跳回上一个页面,会比push更为好一点
      this.$router.go(-1)
    },
    changePlaceholder (asd) {
      this.iptPlaceholder = asd
    }
  }
}
</script>

<style lang="less" scoped>
.popup {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  background-color: #efefef;
  z-index: 99;
}
</style>
